<template>
	<div ref="lazyRef">
		<template v-if="lazyShow">
			<slot></slot>
		</template>
	</div>
</template>

<script setup name="MyLazy">
import { useIntersectionObserver } from '@vueuse/core';
const lazyShow = ref(false),
	lazyRef = shallowRef(null);

onMounted(() => {
	const { stop } = useIntersectionObserver(lazyRef, ([{ isIntersecting }]) => {
		// 如果元素可以，发送请求获取数据，并停止检测避免重复发送请求
		if (isIntersecting) {
			lazyShow.value = true;
			stop();
		}
	});
});
</script>
